<template>
  <div id="menu">
    <el-scrollbar :wrapStyle="[{maxHeight:bodyHeight - 100 + 'px'}]">
      <el-menu :default-active="$route.path"
               :collapse="isCollapse" unique-opened router
               background-color="#1c2b36" text-color="#fff" active-text-color="#FFA20A">

      <template v-for='resource in resources'>
        <template v-if="resource.leaf">
          <el-menu-item :index="resource.router">
            <i class="menu-icon"></i>
            <span class='menu-name' slot="title">{{resource.name}}</span>
          </el-menu-item>
        </template>
        <template v-else>
          <el-submenu :index="resource.id+''">
            <template slot="title">
              <i class="menu-icon">
              <img v-if="resource.icon==='route-icon'"
                   src="../assets/img/menu-route.png" height="24" alt=""/>
              <img v-else-if="resource.icon==='ticket-icon'"
                   src="../assets/img/menu-ticket.png" height="24" alt=""/>
              <img v-else-if="resource.icon==='money-icon'"
                   src="../assets/img/menu-money.png" height="24" alt=""/>
              <img v-else-if="resource.icon==='setting-icon'"
                   src="../assets/img/menu-setting.png" height="24" alt=""/>
              </i>
              <span class="menu-name" slot="title">{{resource.name}}</span>
            </template>
            <el-menu-item-group>
              <!-- <li class='el-menu-item smallTwoMenuTitle'>{{resource.name}}</li> -->
              <template v-for='child in resource.children'>
                <el-menu-item :index="child.router">{{child.name}}</el-menu-item>
              </template>
            </el-menu-item-group>
          </el-submenu>
        </template>
      </template>

    </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
  import {mapState} from 'vuex'

  export default {
    name: 'Menu',
    props: ['asideWidth'],
    data () {
      return {
        isCollapse: true,
      }
    },

    computed: mapState({
      bodyHeight: state => state.global.bodyHeight,
      bodyWidth: state => state.global.bodyWidth,
      resources: state => state.staff.loginedStaff.resources
    }),
    watch: {
      asideWidth: function (value) {
        this.changeMenuWidth();
      }
    },
    created: function () {
      this.changeMenuWidth();
      console.log(this.resources[1])
    },
    mounted(){

    },
    methods: {
      changeMenuWidth() {
        if (this.asideWidth == 60) {
          this.isCollapse = true;
        } else if (this.asideWidth == 260) {
          let timer = setTimeout(() => {
            this.isCollapse = false;
            clearTimeout((timer));
          }, 50);
        }
      }
    }

  }
</script>

<style lang="less">
  @import '../assets/style/main.less';


  #menu {
    .el-menu {
      border-right: none;
      width:100%;
    }
    .el-menu-item {
      padding: 0 17px 0 18px !important;
      height: 60px;
      line-height: 60px;
      border-left: 1px solid rgba(255, 255, 255, 0);
      .my-opacity(0.8);
    }
    .el-submenu {
      border-left: 1px solid rgba(255, 255, 255, 0);
    }
    .el-menu-item-group .el-menu-item {
      padding-left: 90px !important;
    }
    .el-menu-item-group__title {
      padding: 0;
    }
    .el-submenu__title {
      height: 60px;
      line-height: 60px;
      .my-opacity(0.8);
      &:hover {
        .my-opacity(1);
      }
    }
    .el-menu-item:focus, .el-menu-item:hover, .el-submenu__title:hover, .el-menu-item.is-active {
      .my-opacity(1);
      background-color: @menuBackColor1 !important;
    }
    .el-menu-item.is-active {
      border-left: 1px solid @primaryColor;
      color: @primaryColor;
    }
    .menu-icon {
      margin-right: 10px;
    }
    .el-menu--collapse {
      > .el-menu-item .el-tooltip .menu-icon {
        position: absolute;
        left: 18px;
        top: 1px;
      }
    }


    .clearfix:after{
      content:"";//设置内容为空
      height:0;//高度为0
      line-height:0;//行高为0
      display:block;//将文本转为块级元素
      visibility:hidden;//将元素隐藏
      clear:both//清除浮动
    }
    　　.clearfix{
      zoom:1; //为了兼容IE
    }
    .list-item {
      background:@primaryColor !important;
      margin-bottom: 20px;
      .my-opacity(1);
      border-left:0;
      span{
        line-height: 24px !important;
        font-size: 16px !important;
        color: @menuFontColor !important;
        display: block;
        float: left;
        margin-top: 19px;

      }
      img{
        display: block;
        height: 18px;
        float: right;
        margin-top: 20px;
      }
    }

    .list-item:focus, .list-item:hover {
      .my-opacity(1);
      background-color: @primaryColor !important;
    }
  }
</style>
